﻿<UserControl x:Class="Microsoft.Popfly.GameCreator.GameEngine.RuntimeBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:Microsoft.Popfly.GameCreator.GameEngine"
    >

    <Canvas Name="runtimeBarCanvas">
        <Canvas.Resources>
            <Style x:Key="RuntimeBarButtonStyle" TargetType="Button">
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Canvas Cursor="Hand" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" x:Name="ButtonRoot">
                                <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                            <GradientStop Color="#FF8D9194" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <ContentPresenter 
                             Margin="2,2,2,2"
                             Content="{TemplateBinding Content}" />
                                <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Stroke="#555" StrokeThickness=".5">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                            <GradientStop Color="#E0FFFFFF" Offset="0"/>
                                            <GradientStop Color="#20FFFFFF" Offset="0.6"/>
                                            <GradientStop Color="#40FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Canvas>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Canvas.Resources>
        <Rectangle Name="background" Canvas.Left="-1" Stroke="#555" Height="22" Width="100">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFEAEFF4" Offset="0"/>
                    <GradientStop Color="#FFBDC3C7" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <StackPanel Name="LeftAignedButtons" Orientation="Horizontal" Width="66">
            <Button Click="PopflyButton_Click" Name="Popfly" Style="{StaticResource RuntimeBarButtonStyle}" Width="22" Height="22">
                <Button.Content>
                    <Canvas>
                        <Ellipse Width="13.226" Height="13.226" Fill="#2366ce" Canvas.Left="3.375" Canvas.Top="2"/>
                        <Ellipse Width="3.541" Height="3.541" Fill="#2366ce" Canvas.Left="3.562" Canvas.Top="15"/>
                    </Canvas>
                </Button.Content>
            </Button>
            <Button Click="PauseButton_Click" Name="PauseButton" Visibility="Collapsed" Style="{StaticResource RuntimeBarButtonStyle}" Width="22" Height="22">
                <Button.Content>
                    <Canvas>
                        <Path Stroke="#555" StrokeThickness="3" Data="M7,5 L7,15"/>
                        <Path Stroke="#555" StrokeThickness="3" Data="M13,5 L13,15"/>
                    </Canvas>
                </Button.Content>
            </Button>
            <Button Name="PlayButton" Click="PlayButton_Click" Style="{StaticResource RuntimeBarButtonStyle}" Width="22" Height="22">
                <Button.Content>
                    <Canvas>
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="playButtonRotation" CenterX="8" CenterY="9.5" />
                        </Canvas.RenderTransform>
                        <Canvas.Resources>
                            <Storyboard x:Name="faceForward">
                                <DoubleAnimation Storyboard.TargetName="playButtonRotation" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:.2"/>
                                <DoubleAnimation Storyboard.TargetName="playButtonLine" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.2"/>
                            </Storyboard>
                            <Storyboard x:Name="faceBackwards">
                                <DoubleAnimation Storyboard.TargetName="playButtonRotation" Storyboard.TargetProperty="Angle" To="540" Duration="0:0:.2"/>
                                <DoubleAnimation Storyboard.TargetName="playButtonLine" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:.2"/>
                            </Storyboard>
                        </Canvas.Resources>
                        <Line Name="playButtonLine" Canvas.Left="1.7" Canvas.Top="3.6" StrokeThickness="3" Y2="12.7" Stroke="#555" Opacity="0"/>
                        <Path Canvas.Left="5" Canvas.Top="3.5" Width="10.8489" Height="12.7451" Fill="#555" Stretch="Fill" Data="F1 M 37.7441,432.466C 37.7441,433.284 37.7181,443.308 37.7181,444.588L 37.7181,444.588C 37.7181,445.993 38.393,446.415 39.5436,445.777L 39.5436,445.777C 40.6952,445.138 48.7083,440.478 49.7317,439.842L 49.7317,439.842C 50.7541,439.202 50.8833,437.968 49.8669,437.362L 49.8669,437.362C 48.7473,436.696 40.4949,432.128 39.4425,431.549L 39.4425,431.549C 39.1521,431.39 38.8977,431.322 38.6794,431.322L 38.6794,431.322C 38.0676,431.322 37.7441,431.862 37.7441,432.466 Z"/>
                    </Canvas>
                </Button.Content>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Name="RightAlignedButtons">
            <Button Click="VolumeButton_Click" Name="VolumeButton" Style="{StaticResource RuntimeBarButtonStyle}" Width="22" Height="22">
                <Button.Content>
                    <Canvas>
                        <Rectangle Width="8.073" Height="7.89" Fill="#FF9FA3A5" Stroke="#555" Canvas.Left="4.059" Canvas.Top="6.5"/>
                        <Path Width="7.449" Height="15.278" Fill="#FF9FA3A5" Stretch="Fill" Stroke="#555" Data="M456,46 L494,41 494,59 456,54 z" Canvas.Left="8" Canvas.Top="2.5"/>
                        <Canvas Name="crossOut" Visibility="Collapsed" Canvas.Left="2" Canvas.Top="2">
                            <Ellipse Stroke="Red" StrokeThickness="2" Width="16" Height="16"/>
                            <Line Stroke="Red" StrokeThickness="2" X1="2" X2="14" Y1="2" Y2="14"/>
                        </Canvas>
                    </Canvas>
                </Button.Content>
            </Button>
            
            <Button Click="HowToPlayButton_Click" Name="HowToPlayButton" Style="{StaticResource RuntimeBarButtonStyle}" Width="63" Height="22">
                <Button.Content>
                    <Canvas>
                        <TextBlock Name="bigText" Foreground="#555" Canvas.Left="3.5" Canvas.Top="3.359" FontSize="9" Text="how to play"/>
                    </Canvas>
                </Button.Content>
            </Button>
        </StackPanel>
    </Canvas>
</UserControl>
